<template>
	<view class="page-wrapper">
		<view class="user">
			<view :style="{ paddingTop: getSystemInfo.navBarHeight + 'px' }"></view>
			<view class="user-wrapper">
				<view class="avatar" @click="goUserDetail">
					<u-avatar class="image" :src="getPeronalInfo.headImgUrl?getPeronalInfo.headImgUrl:headImgUrl"
						shape="circle" size="128"></u-avatar>
				</view>
				<view class="user-member">
					<view class="top">
						<view class="info">{{getPeronalInfo.nickname || ''}}</view>
						<view class="status">
							<view class="yes" v-if="isAuth">
								<u--image
									src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/icon_memberAuth.png"
									width="14px" height="14px"></u--image>
									<text style="margin-left: 6rpx;">{{ getUserInfo.userMember.name }}</text>
							</view>
							<view class="no" v-else>未认证</view>
						</view>
					</view>
					<view class="bottom" v-if="isAuth">
						<view class="fleet" v-if="getUserInfo.fleetFlag">
							<view class="fleet-left"> <text>所属车队</text> </view>
							<view class="fleet-right">{{ getUserInfo.fleetName }}</view>
						</view>
						<!-- {{ getUserInfo.fleetFlag ? '所属车队：' + getUserInfo.fleetName : '' }} -->
					</view>
					<view class="bottom" v-if="isAuth" @click="showThreshold=true">
						{{getUserInfo.userMember.threshold?getUserInfo.userMember.threshold:''}}
					</view>
				</view>
				<view class="setting" @click="goUserDetail">
					<u--image
						src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/user_setting_black.png"
						width="20px" height="20px"></u--image>
				</view>
			</view>
		</view>
		<view class="section-item member-wrapper">
			<view class="member-attestation">
				<view class="img">
					<image class="image"
						src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/icon_memberCenter.png">
					</image>
				</view>
				<view class="mark"></view>
				<view class="info">{{getUserAttestation}}</view>
				<view class="btn">
					<u-icon name="arrow-right" color="#ffffff" size="24" @click="handleUserMember(isAuth)"></u-icon>
					<!-- <button class="attestation-btn" @click="handleUserMember(isAuth)">{{isAuth?'查看详情':'立即认证'}}</button> -->
				</view>
			</view>
			<view class="member-row">
				<view class="member-row-item" @click="handleTab('point')">
					<view class="member-item member-item-top">{{totalNotUsed}}</view>
					<view class="member-item member-item-bottom">积分</view>
				</view>
				<view class="member-row-item" @click="handleTab('coupon')">
					<view class="member-item member-item-top">{{totalCoupon}}</view>
					<view class="member-item member-item-bottom">优惠券</view>
				</view>
				<view class="member-row-item" @click="handleTab('reward')">
					<view class="member-item member-item-top">{{totalReward}}</view>
					<view class="member-item member-item-bottom">奖品</view>
				</view>
				<view class="member-row-item" @click="handleTab('cart')">
					<view class="member-item member-item-top">{{totalCart}}</view>
					<view class="member-item member-item-bottom">购物车</view>
				</view>
			</view>
		</view>
		<view class="section-item order-wrapper">
			<view class="title-wrapper">
				<view class="title-left">我的订单</view>
				<view class="title-right" @click="handleAllOrder">
					<view class="title-right-text">全部订单</view>
					<view class="title-right-icon">
						<uni-icons type="right" size="12"></uni-icons>
					</view>
				</view>
			</view>
			<view class="order-list">
				<view class="order-item" v-for="item in orderInfoList" :key="item.label" @click="handleOrder(item)">
					<view class="order-item-top">
						<image class="image" :src="item.icon"></image>
					</view>
					<view class="order-item-bottom">{{item.label}}</view>
				</view>
			</view>
		</view>
		<view class="section-item function-wrapper">
			<view class="title-wrapper">
				<view class="title-left">常用功能</view>
			</view>
			<view class="function-list">
				<view class="function-item" v-for="item in functionInfoList" :key="item.label"
					@click="handleFunction(item)">
					<view class="function-item-top">
						<image class="image" :src="item.icon"></image>
					</view>
					<view class="function-item-bottom">{{item.label}}</view>
				</view>
			</view>
		</view>
		<u-modal :show="showThreshold" title="提示" :showCancelButton="false" confirmText="确认" confirmColor="#CF1A1B"
			:content="getUserInfo.userMember.threshold" @confirm="showThreshold=false" @cancel="showThreshold=false">
		</u-modal>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				totalNotUsed: '0',
				expiringSoon: '0',
				totalCoupon: '0',
				totalReward: '0',
				totalCart: '0',
				showThreshold: false,
				orderInfoList: [{
						label: '待付款',
						icon: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/icon_orderStatus/status_1.png',
						url: '/orderPack/list/index?status=1'
					},
					{
						label: '待使用',
						icon: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/icon_orderStatus/status_2.png',
						url: '/orderPack/list/index?status=4'
					},
					{
						label: '服务中',
						icon: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/icon_orderStatus/status_3.png',
						url: '/orderPack/list/index?status=5'
					},
					{
						label: '待评价',
						icon: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/icon_orderStatus/status_4.png',
						url: '/orderPack/evaluate/index'
					},
					{
						label: '退款/售后',
						icon: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/icon_orderStatus/status_5.png',
						url: '/orderPack/aftermarket/index'
					}
					// {
					// 	label: '待评价',
					// 	icon: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/order_04.png',
					// 	// url: '/orderPack/rate/index'
					// },
					// {
					// 	label: '退款/售后',
					// 	icon: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/order_05.png',
					// 	// url: '/orderPack/aftermarket/index'
					// }
				],
				functionInfoList: [{
						label: '我的车辆',
						icon: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/function_01.png',
						url: '/minePack/function/myCar'
					},
					{
						label: '邀请有礼',
						icon: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/function_02.png',
						url: '/indexPack/invite/index'
					},
					{
						label: '抽奖活动',
						icon: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/function_03.png',
						url: '/minePack/function/raffle/raffle'
					},
					{
						label: '开发票',
						icon: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/function_04.png',
						url: '/minePack/function/invoice/invoice'
					},
					{
						label: '联系客服',
						icon: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/function_05.png',
						type: 'service'
					},
					{
						label: '轮胎售后',
						icon: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/function_06.png',
						url: '/indexPack/guarantee/index'
					},
					{
						label: '卡友家园',
						icon: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/function_07.png',
						url: '/carePack/index/index'
					},
					{
						label: '我的发布',
						icon: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/function_08.png',
						url: '/circlePack/mine/index'
					},
					{
						label: '我的救援',
						icon: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/function_09.png',
						url: '/rescuePack/rescueList/index'
					},
					{
						label: '服务投诉',
						icon: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/function_10.png',
						url: '/indexPack/complaint/index'
					}
				],
				headImgUrl: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/user_avatar.png',
				fristGoDetail: true
			}
		},
		computed: {
			...mapGetters('user', ['getUserInfo', 'getPeronalInfo']),
			...mapGetters('global', ['getSystemInfo']),
			getUserAttestation() {
				if (this.isAuth) {
					return '享购胎有礼、万元抽奖等福利'
				} else {
					return '认证有礼，享多重卡友福利 '
				}
			},
			isAuth() {
				return !!this.getUserInfo.userCarInfo
			}
		},
		methods: {
			...mapActions('user', ['refreshUserInfo']),

			goUserDetail() {
				uni.navigateTo({
					url: `/minePack/user/personalInformation/index`
				})
			},
			handleUserMember(flag) {
				if (flag) {
					uni.navigateTo({
						url: `/minePack/user/memberCenter/index`
					})
				} else {
					uni.navigateTo({
						url: `/indexPack/car/authenticate`
					})
					uni.setStorageSync('authSource', 'mine')
				}
			},
			handleAllOrder() {
				uni.navigateTo({
					url: `/orderPack/list/index`
				})
			},
			handleOrder(item) {
				console.log('跳转指定订单')
				if (item.url) {
					uni.navigateTo({
						url: item.url
					})
				}

			},
			handleFunction(item) {
				uni.setStorageSync('careAuth', 'mine')
				if (item.label === '我的车辆') {
					if (this.isAuth) {
						item.url = `/minePack/function/myCar`
					} else {
						item.url = `/indexPack/car/authenticate`
						uni.setStorageSync('authSource', 'mine')
					}
				}
				if (item.type && item.type == 'service') {
					uni.showModal({
						title: "拨打电话",
						content: '400-696-5399',
						confirmText: "确认",
						cancelText: "取消",
						success: res => {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: '400-696-5399'
								})
							}
						}
					})
				}
				if (item.url) {
					if (item.label === '我的联保') {
						uni.setStorageSync('toGuaranteePath', 'mine')
					}
					uni.navigateTo({
						url: item.url
					})
				}

			},
			handleTab(index) {
				if (index === 'coupon') {
					uni.navigateTo({
						url: `/minePack/coupon/index`
					})
				} else if (index === 'cart') {
					uni.navigateTo({
						url: `/components/cartList`,
						success: () => {
							setTimeout(() => {
								uni.$emit('cartSource', {
									path: '/pages/mine/home',
									isTabbar: true
								})
							}, 500)
						}
					})
				} else if (index == 'point') {
					uni.navigateTo({
						url: `/indexPack/integral/shop`
					})
				} else if (index == 'reward') {
					uni.navigateTo({
						url: `/indexPack/prize/prizeList`
					})
				}
			},
			async initData() {
				try {
					//奖品
					const res = await this.$request({
						url: '/ltb-center/giftRecords/carOwnerPrizeCount',
						method: 'GET',
						data: {
							userId: this.getUserInfo.id
						}
					})
					this.totalReward = res.datas || '0'
				} catch (e) {
					console.log('获取奖品信息失败!')
					this.totalReward = '0'
				}

				try {
					//积分
					const res = await this.$request({
						url: '/marketing-center/integralRuleDetails/getUserIntegral',
						data: {
							pageSize: 10,
							pageNum: 1,
							userId: this.getUserInfo.id
						}
					})
					this.totalNotUsed = res.datas.notUsed || '0'
					this.expiringSoon = res.datas.expiringSoon || '0'
				} catch (e) {
					console.log('获取积分信息失败!')
					this.totalNotUsed = '0'
					this.expiringSoon = '0'
				}

				try {
					//购物车
					const {
						datas
					} = await this.$request({
						url: '/order-center/owner-carts/count',
						method: 'GET'
					})
					this.totalCart = datas || '0'
				} catch (e) {
					console.log('获取购物车消息失败!')
					this.totalCart = '0'
				}

				try {
					//优惠券
					const res = await this.$request({
						url: '/marketing-center/distribution/listByAPP',
						data: {
							couponStatusList: ["0"],
							pageSize: 10000,
							pageNum: 1,
							userId: this.getUserInfo.id
						}
					})
					this.totalCoupon = res.datas.count || '0'
				} catch (e) {
					console.log('获取优惠券消息失败!')
					this.totalCoupon = '0'
				}

			}
		},
		onShow() {
			this.refreshUserInfo()
			this.initData()

			// 车队用户登录，订单状态则是待审核，其它用户是待付款
			if (this.getUserInfo.fleetFlag) {
				this.orderInfoList[0].label = '待审核'
				this.functionInfoList = this.functionInfoList.filter(i => i.label !== '开发票')
			}
		},
		// 点击tabBar把当前的下标传入全局
		onTabItemTap(item) {
			this.$store.state.global.tabBarIndex = item.index
		},
	}
</script>

<style lang="scss" scoped>
	.page-wrapper {
		width: 100%;
		min-height: 100%;
		box-sizing: border-box;

		.section-item {
			// margin-bottom: 20rpx;
			border-radius: 16rpx;
			overflow: hidden;
			margin: 0 20rpx 20rpx;
		}

		.user {
			height: 482rpx;
			width: 100%;
			background: url('https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/bg_memberMine.png') no-repeat;
			background-size: cover;

			.user-wrapper {
				min-height: 60rpx;
				margin-top: 10rpx;
				display: flex;
				align-items: center;
				position: relative;

				.avatar {
					text-align: center;
					border-radius: 50%;
					width: 62px;
					height: 62px;
					margin-left: 32rpx;

					.image {
						width: 100%;
						height: 100%;
					}
				}

				.user-member {
					display: flex;
					flex-direction: column;
					margin-left: 32rpx;

					.top {
						display: flex;
						align-items: center;

						.info {
							font-size: 36rpx;
							font-weight: 400;
							color: #333333;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							max-width: 220rpx;
							text-shadow: 0 0 0.1px currentColor;
						}

						.status {
							max-width: 250rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							margin-left: 8rpx;
							font-size: 24rpx;
							border-radius: 4rpx;
							padding: 0 4rpx;
							background-color: #FFE5BC;
						}

						.yes {
							display: flex;
							align-items: center;
							// background: linear-gradient(180deg, #FFE9BE 0%, #FFD88B 100%);
							color: #C32530;
						}

						.no {
							background: #E05D33;
							color: #FFFFFF;
							padding: 2rpx 6rpx;
						}
					}

					.bottom {
						margin-top: 14rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #A74042;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						max-width: 450rpx;
						.fleet {
							border-radius: 5rpx;
							border: 1px solid #F05A5C;
							display: flex;
							align-items: center;
							max-width: 430rpx;
							background-color: #ffffff;
							width: fit-content;
							.fleet-left {
								padding: 6rpx;
								background-color: #F05A5C;
								color: #FFFFFF;
								text {
									display: inline-block;
									transform: skewX(-10deg);
								}
							}
							.fleet-right {
								color: #F05A5C;
								margin: 0 12rpx;
							}
						}
					}

				}

				.setting {
					position: absolute;
					right: 20rpx;
				}
			}
		}

		.member-wrapper {
			margin: -140rpx 20rpx 20rpx;
			
			.member-attestation {
				height: 88rpx;
				background: url('https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/bg_memberCenter.png') no-repeat;
				display: flex;
				align-items: center;
				width: 100%;
				padding: 24rpx 32rpx;
				box-sizing: border-box;
				overflow: hidden;
			
				.img {
					width: 182rpx;
					height: 34rpx;
			
					.image {
						width: 100%;
						height: 100%;
					}
				}
				
				.mark {
					margin: 0 16rpx;
					background-color: #FFFFFF;
					width: 1px;
					height: 60%;
				}
			
				.info {
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
					font-family: DingTalk-JinBuTi, DingTalk;
					transform: skewX(-10deg);
					letter-spacing: 2rpx;
				}
			
				.btn {
					margin-left: auto;
				}
			}

			.member-row {
				height: 144rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				background: #FFFFFF;

				.member-row-item {
					flex: 1;
					text-align: center;
				}

				.member-item-top {
					color: #000000;
					font-size: 36rpx;
					text-shadow: 0 0 0.1px currentColor;
				}

				.member-item-bottom {
					margin-top: 18rpx;
					font-size: 26rpx;
				}
			}
		}

		.order-wrapper {
			background: #FFFFFF;

			.order-list {
				display: flex;
				padding: 40rpx 26rpx 32rpx;
				box-sizing: border-box;

				.order-item {
					flex: 1;
					text-align: center;

					.order-item-top {
						width: 44rpx;
						height: 44rpx;
						margin: 0 auto;

						.image {
							width: 100%;
							height: 100%;
						}
					}

					.order-item-bottom {
						margin-top: 20rpx;
						font-size: 26rpx;
						color: #000000;
					}
				}
			}
		}

		.function-wrapper {
			padding-bottom: 32rpx;
			background: #FFFFFF;
			box-sizing: border-box;

			.function-list {
				display: flex;
				flex-wrap: wrap;
				// margin-top: 40rpx;
				padding: 0 26rpx;
				box-sizing: border-box;

				.function-item {
					width: 25%;
					text-align: center;
					margin-top: 30rpx;
					
					// &:nth-child(n+6) {
					// 		margin-top: 46rpx;
					// }

					.function-item-top {
						width: 64rpx;
						height: 64rpx;
						margin: 0 auto;

						.image {
							width: 100%;
							height: 100%;
						}
					}

					.function-item-bottom {
						margin-top: 10rpx;
						font-size: 26rpx;
						line-height: 36rpx;
						color: #000000;
					}
				}
			}
		}
	}

	.title-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 32rpx 0;

		.title-left {
			font-size: 30rpx;
			text-shadow: 0 0 0.1px currentColor;
			color: #000000;
		}

		.title-right {
			display: flex;
			align-items: center;

			.title-right-text {
				font-size: 26rpx;
				font-weight: 400;
				color: #999999;
			}

			.title-right-icon {
				margin-left: 2rpx;
				// margin-top: -2px;
			}
		}
	}
</style>